<template>
  <el-container>
    <el-header>
      <strong>人力资源管理系统</strong>
      <div class="header-avatar">
        <el-avatar :src="userInfo.avatar"></el-avatar>
        <el-dropdown>
          <span class="el-dropdown-link">
            {{userInfo.username}}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <!--<router-link to="/userCenter" @click="goUserCentre">个人中心</router-link>-->
                <el-button type="text" @click="goUserCentre">个人中心</el-button>
              </el-dropdown-item>
              <el-dropdown-item @click.enter="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-link href="http://www.sxhkxy.com" target="_blank">学院首页</el-link>
        <el-link href="https://www.baidu.com" target="_blank">百度</el-link>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <sider-menu />
      </el-aside>
      <el-main class="el-main">
        <tabs />
        <div style="padding: 0 15px;">
          <router-view />
        </div>
      </el-main>
    </el-container>
    <el-footer>
      陕西航空职业技术学院
    </el-footer>
  </el-container>
</template>

<script>
import request from '@/util/request.js'
import SiderMenu from '../components/SiderMenu.vue'
import Tabs from '../components/Tabs.vue'
import { useRoute } from 'vue-router'

export default {
  name: 'Home',
  components: {
    SiderMenu,
    Tabs
  },
  setup() {
    const route = useRoute()

    return {
      route
    }
  },
  data() {
    return {
      userInfo: {
        id: '',
        username: '',
        avatar: ''
      }
    }
  },
  created() {
    this.getUserInfo()
    this.loadPath()
  },
  methods: {
    // 加载路径信息
    loadPath() {
      // 获取路由表
      let routes = this.$router.getRoutes()
      // 循环路由表
      routes.some(r => {
        // 如果找到符合条件的路由
        if(r.path === this.route.path) {
          const item = {
            name: r.name,
            title: r.meta.title
          }
          // 添加标签
          this.$store.commit('addTab', item)
          return true
        }
      })
    },
    // 获取用户信息
    getUserInfo() {
      request.get('/user/info').then(res=>{
        this.userInfo = res.data
      })
    },
    // 跳转到用户中心
    goUserCentre() {
      let item = {
        path: '/userCenter',
        title: '用户中心',
        name: 'UserCenter'
      }
      // 添加标签
      this.$store.commit('addTab', item)
      this.$router.push({name: 'UserCenter'})
    },
    // 退出
    logout() {
      request.post('/user/logout').then(res=>{
        // console.log(res)
        this.$store.commit('resetState')
        this.$router.push('/login')
      })
    }
  }
}
</script>

<style scoped>
  .el-container {
    height: 100%;
  }
  .el-header, .el-footer {
    background-color: #17B3A3;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    line-height: 200px;
  }

  .el-main {
    /* background-color: #E9EEF3; */
    color: #333;
    padding: 0;
    height: calc(100vh - 120px);
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  
  .el-dropdown-link {
    cursor: pointer;
  }

  .header-avatar {
    float: right;
    width: 260px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
</style>